<template>
  <div>
    <!-- vxe 检索表单 -->
    <vxe-form
      :data="formSearchDataCom"
      title-width="120"
      title-align="right"
      @submit="searchEvent"
      @reset="resetSearchEvent"
    >


      <vxe-form-item
        field="table_name"
        :title="$t('表名')"
        span="12"
        :item-render="{name: 'ElSelect', options: tableTypeOptions}"
      >
      </vxe-form-item>

      <vxe-form-item
        field="ps_type"
        :title="$t('主子类型')"
        span="12"
        :item-render="{name: 'ElSelect', options: psTypeOptions}"
      >
      </vxe-form-item>

      <vxe-form-item
        v-if="isexEditTableFuCom"
        field="p_table_name"
        :title="$t('父表名')"
        span="12"
        :item-render="{name: 'ElSelect', options: tableTypeOptionsfu}"
      >
      </vxe-form-item>

      <!-- 查询&重置 -->
      <vxe-form-item
        span="24"
        align="center"
        :item-render="{name: 'ElButtons', children: [{ content: $t('base.affirm'), props: {type: 'primary', nativeType: 'submit',size:'mini'} }, { content: $t('base.reset'), props: {nativeType: 'reset',size:'mini'} }]}"
      >
      </vxe-form-item>

    </vxe-form>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'


export default {
  name: 'searchForm',
  components: {
    //PageHeaderLayout,
  },
  // 定义属性
  data() {
    return {

    }
  },
  props: {
    formSearchData: {
      type: Object,
      default: function () {
        return {
          table_name: '',
          ps_type: '',
          p_table_name: '',
        }
      }
    },
    // 表选项
    tableTypeOptions:{
      type: Array
    },
    // 父表选项
    tableTypeOptionsfu:{
      type: Array
    },
    // 主子类型选项
    psTypeOptions:{
      type: Array,
      description: "主子类型选项"
    },
    // 是否是子类型
    isexEditTableFu:{
      type: Boolean,
      default: false,
      description: "是否是子类型"
    },
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    isexEditTableFuCom: {
      get() {
        return this.isexEditTableFu
      },
      set(val) {
        this.$emit('update:isexEditTableFu', val)
      }
    },
    formSearchDataCom: {
      get() {
        return this.formSearchData
      },
      set(val) {
        this.$emit('update:formSearchData', val)
      }
    },
    formSearchData_table_name(){
      return this.formSearchData.table_name
    },
    formSearchData_ps_type(){
      return this.formSearchData.ps_type
    },
    formSearchData_p_table_name(){
      return this.formSearchData.p_table_name
    }
  },
  // 监控data中的数据变化
  watch: {
    formSearchData_table_name: {
      handler(nVal,oVal){
        this.$emit('formSearchDataTableNameChangeEmit',nVal,'table_name')
      },
      immediate:false
    },
    formSearchData_ps_type: {
      handler(nVal,oVal){
        if (nVal === "2") {
          this.isexEditTableFuCom = true
        }else{
          this.isexEditTableFuCom = false
        }
      },
      immediate:false
    },
    formSearchData_p_table_name: {
      handler(nVal,oVal){
        this.$emit('formSearchDataPTableNameChangeEmit',nVal,'p_table_name')
      },
      immediate:false
    }
  },
  // 方法集合
  methods: {
    searchEvent() {
      this.$emit('searchEventEmit')
    },
    resetSearchEvent() {
      this.$emit('resetSearchEventEmit')
    },

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>


</style>